<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 头部 -->
        <el-button type="primary" @click="addEcoFn">添加经纪</el-button>
        <div class="right">
          <el-input
            placeholder="请输入名称关键词"
            v-model="pageSetting.name_contains"
            class="input-with-select"
          >
            <el-button
              @click="searchFn"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
      </div>
      <!-- 内容 -->
      <div class="text item">
        <el-table
          height="600px"
          :data="ecoData[page]"
          border
          style="width: 100%"
        >
          <el-table-column prop="image" label="图片">
            <template slot-scope="{ row }">
              <img width="75px" :src="row.image" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="phone" label="电话"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="desc" label="介绍"> </el-table-column>
          <el-table-column width="200" prop="address" label="操作">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="updateEco(row.id)"
                >编辑</el-button
              >
              <el-button type="danger" size="small" @click="delEco(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        align="center"
        :page-size="limit"
        @current-change="currentChange"
        layout="total,prev, pager, next"
        :total="totalData.length"
      >
      </el-pagination>
    </el-card>
    <!-- 弹窗 -->
    <AddEco ref="AddEco"></AddEco>
  </div>
</template>
<script>
import {
  getEconomicslist,
  getEconomicslistCount,
  delEconomics,
} from "@/api/economics";
import AddEco from "./components/add-eco.vue";
import { dimensionOneToTwo } from "../../share";
export default {
  components: {
    AddEco,
  },
  data() {
    return {
      ecoData: [],
      total: 0,
      pageSetting: {
        _limit: 4,
        _start: 0,
        name_contains: "",
      },
      isShowDialog: false,
      limit: 4,
      page: 0,
      totalData: 0,
    };
  },
  async created() {
    this.getEconomicslist();
  },
  methods: {
    //搜索关键词
    searchFn() {
      if (!this.pageSetting.name_contains) {
        this.$message.warning("请输入名称关键词");
        return;
      }
      this.getEconomicslist();
    },
    //添加经济
    addEcoFn() {
      this.$refs.AddEco.isShowDialog = true;
      this.$nextTick(() => {
        this.$refs.AddEco.$refs.ecoPhoto.fileList = [];
      });
      this.$refs.AddEco.formData.image = "";
    },
    async getEconomicslist() {
      this.pageSetting._limit = await getEconomicslistCount();
      this.totalData = await getEconomicslist(this.pageSetting);
      this.ecoData = dimensionOneToTwo(this.totalData, this.limit);
    },
    currentChange(curPage) {
      this.page = curPage - 1;
      this.getEconomicslist();
    },
    //更新经济
    async updateEco(id) {
      this.$refs.AddEco.isShowDialog = true;
      this.$refs.AddEco.editEconomics(id);
    },
    //删除经济
    async delEco(id) {
      await this.$confirm("确定删除吗");
      await delEconomics(id);
      this.$message.success("删除成功");
      this.getEconomicslist();
    },
  },
  watch: {
    "pageSetting.name_contains"(newVal) {
      if (!newVal) this.getEconomicslist();
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  float: right;
  .input {
    float: right;
  }
  .btn {
    height: 32px;
    float: right;
  }
}
img {
  width: 184px !important;
  height: 160px;
}
</style>